<template>
  <div id="UserCenterDownload">
    <div class="title">
      <span class="iconfont icon-xiazai"></span>
      我的下载
    </div>
    <div class="download-wrap">
      <!-- <div class="search">
        <el-row :gutter="20" type="flex">
          <el-col :span="6">
            <el-input placeholder="请输入标题" v-model="listQuery.title" clearable></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="custom" @click="getList()" plain>搜索</el-button>
          </el-col>
        </el-row>
      </div> -->
      <el-tabs v-model="listQuery.collectType" type="card" @tab-click="handleClick">
        <el-tab-pane label="书籍下载" name="1"></el-tab-pane>
        <el-tab-pane label="文章下载" name="2"></el-tab-pane>
        <div class="msgDataList">
          <el-table :data="tableData" stripe style="width: 100%">
            <!-- <el-table-column prop="sysAttachment" label="缩略图" width="100">
              <template slot-scope="scope">
                <div class="img-box">
                  <img class="thumbnail" :src="scope.row | fileThumbnail" />
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="fileName"  :label="listQuery.collectType==1?'书籍名称':'文章名称'" show-overflow-tooltip >
                <template slot-scope="scope">
                    <div v-if="listQuery.collectType==1">
                        {{ scope.row.sysJournal.name }}
                    </div>
                     <div v-if="listQuery.collectType==2">
                        {{ scope.row.sysNewsContents.title }}
                    </div>
              </template>
            </el-table-column>

            <el-table-column prop=""  :label="listQuery.collectType==1?'年份':'栏目'"   width="100" >
                 <template slot-scope="scope">
                   
                     <div v-if="listQuery.collectType==1">
                        {{ scope.row.sysJournal.year }}
                    </div>
                     <div v-if="listQuery.collectType==2">
                        {{ scope.row.sysNewsContents.classifyNames }}
                    </div>
              </template>
            </el-table-column>

            <el-table-column prop="createTime" label="下载时间" width="180"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="{ row }">
                <el-button-group>
                  <el-button  size="mini" @click="handleLook(row)">查看{{listQuery.collectType==1?'书籍':'文章'}}</el-button>
                </el-button-group>
              </template>
            </el-table-column>
            <div slot="empty" class="emptyBg">
              <el-empty :image-size="200"></el-empty>
            </div>
          </el-table>
          <Pagination
            v-show="parseInt(pageObj.count) > 0"
            :total="parseInt(pageObj.count)"
            @change="getList"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
          />
        </div>
      </el-tabs>
    </div>
    <Preview />
  </div>
</template>
<script>
import { eduResourceQuoteQuery } from '@/api/admin/teach/eduResourceQuote.js'
import {
  sysJournalCollectQueryMy,
  sysJournalCollectDeleteBatch,
} from '@/api/home/sysJournalCollect'
import setInfo from '@/mixins/setInfo'
import Bus from '@/utils/bus.js'
export default {
  mixins: [setInfo],
  components: {
    Preview: () => import('@/components/resource/preview.vue'),
  },
  data() {
    return {
      listQuery: {
       
        page: 1,
        limit: 8,
        //createBy: this.$store.getters.userId,
       
        collectType: '1',
        opt:'download'
      },
      pageObj: {},
      tableData: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取数据
    getList() {
      sysJournalCollectQueryMy(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
      })
    },
    handleClick(tab, event) {
      this.listQuery.page=1;
      this.tableData=[];
      this.getList()
    },
    //预览
    handleLook(row) {

      if(this.listQuery.collectType==1){
            this.setSession('homeJournal', JSON.stringify(row.sysJournal))
            this.$store.commit('setHomeJournal', row.sysJournal)
            this.$router.push({
                name: 'periodical-center',
                query: {
                id: row.resId,
                },
            })
      }else{
           this.setSession('homeArticle', JSON.stringify(row.sysNewsContents))
            this.$store.commit('setHomeArticle',row.sysNewsContents)
            this.$router.push({
                name: 'pArticle',
                query: {
                id: row.resId,
                },
            })
      }
      
     // Bus.$emit('showPreview', row)
    },
  },
}
</script>
<style scoped lang="scss">
#UserCenterDownload {
  width: 100%;
  min-height: 500px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  .title {
    color: #333;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    background-color: #faf3f3;
    span {
      color: #1d80dc;
      margin-left: 30px;
      margin-right: 10px;
      font-size: 24px;
    }
  }
  .download-wrap {
    padding: 20px 30px;
  }
  .img-box {
    padding: 2px;
    width: auto;
    height: 40px;
    display: inline-block;
    img {
      width: auto;
      height: 100%;
      max-width: 60px;
    }
  }
}
</style>